<template>
	<view class="changePhone_contant">
		<view class="card contant">
			<view class="header">更换新号码</view>
			<view class="middle">
				<view class="Changepass flex">
					<view>国家/地区</view>
					<view style="color:#666;">中国大陆</view>
				</view>
				<view class="Changepass flex">
					<view>手机号</view>
					+86
					<input class="phone-input" type="number" v-model="form.phone" placeholder="请输入手机号"/>
				</view>
				<view class="Changepass flex" style="justify-content: space-between;">
					<input class="phone-input" type="number" v-model="form.code" placeholder="请输入验证码"/>
					<view class="getcode" @tap="getCode">{{!isgetCode ? '发送验证码' : codeCountDown}}</view>
				</view>
			</view>
			<view class="footer" @tap="sumbit">确认提交</view>
		</view>
	</view>
</template>

<script>
	import { smsCode,updateMember } from '@/common/http/api';
	export default {
		data() {
			return {
				form:{
					phone: '',
					code: ''
				},
				timer: null,
				isgetCode: false,
				codeCountDown: 60,
			}
		},
		methods: {
			// 获取验证码
			getCode(){
				if(!this.$ut.checkPhone(this.form.phone)){
					this.$ut.msg("请正确输入手机号码")
					return false;
				}else{
					if(!this.timer){
						// 在这里发送请求
						smsCode({phone:this.form.phone,type:5}).then(res => {
							this.$ut.msg("验证码发送成功")
							this.isgetCode = true;
							this.timer = setInterval(()=>{
								if(this.codeCountDown > 1){
									this.codeCountDown--
								}else{
									this.isgetCode = false;
									this.codeCountDown = 60;
									clearInterval(this.timer)
									this.timer = null;
								}
							},1000)
						}).catch(err => {
							this.$ut.msg(err.msg)
							this.isgetCode = false;
							this.codeCountDown = 60;
							clearInterval(this.timer)
							this.timer = null
						})
					}else{
						this.$ut.msg("请您稍后再试")
					}
				}
			},
			sumbit(){
				if(!this.$ut.checkPhone(this.form.phone)){
					this.$ut.msg("请正确输入手机号码")
					return false;
				}
				if(this.form.code.length < 6){
					this.$ut.msg("请正确的验证码")
					return false;
				}
				updateMember({type: 1,phone: this.form.phone,smsCode:this.form.code}).then(res => {
					this.$ut.msg('修改成功，请重新登录!')
					setTimeout(()=>{
						uni.$u.route({
							url: 'pages_Me/login/login',
							type:'reLaunch'
						})
						this.logout()
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.changePhone_contant{
		.contant{
			padding: 38rpx 60rpx;
		}
		.header{
			margin-bottom: 53rpx;
			font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
			font-weight: 700;
			font-size: 40rpx;
			color: #666666;
		}
		
		.middle{
			.Changepass{
				justify-content: flex-start;
				padding-bottom: 15rpx;
				border-bottom: 2rpx solid #f5f5f5;
				margin-bottom: 30rpx;
				position: relative;
				
				view{
					width: 120rpx;
					// height: 36rpx;
					font-size: 28rpx;
					color: #313131;
					margin-right: 20rpx;
				}
				
				input{
					font-size: 26rpx;
					padding: 0 10rpx;
					line-height: 30rpx;
					color:#666;
				}
				
				.placeholder{
					color: #d9d9d9;
				}
				
				.getcode{
					width: 180rpx;
					height: 59rpx;
					text-align: center;
					line-height: 59rpx;
					color:#fff;
					background-color: #FF4D60;
					border-radius: 34rpx;
				}
			}
		}
		
		.footer{
			width: 100%;
			height: 74rpx;
			background-color: #FF4D60;
			line-height: 74rpx;
			color: #fff;
			text-align: center;
			border-radius: 34rpx;
			margin-top: 80rpx;
			margin-bottom: 22rpx;
		}
	}
</style>
